<template>
  <div>
    <h2>我是content组件内容</h2>
    <h2>{{ message }}</h2>
    <button @click="sendeParent">发送数据</button>
  </div>
</template>
<script>
import { onUpdated, toRefs,ref ,h} from "vue";
export default {
  props: {
    message: {
      type: String,
      default: "你好",
    },
  },
  // setup获取不到this的值的,因为它在生命周期里面,在很前面
  setup(props,context) {
    //props
    // console.log(props.message);

    // 这样是不具有响应式的,这个是ES6的解构,不具有响应式
    // const {message}=props

    // toRefs是为了让它结构出来也具有响应式,因为这是解构操作，解构操作过后会丢失响应性，用toRefs重新建立响应
    // const {message}=toRefs(props)
    // 这里拿到的message是对象的形式,所以需要.value
    // console.log(message.value);

    // onUpdated(()=>{
    //   console.log(message.value);
    // })
    const counter=ref(20)
    function sendeParent(){
      context.emit('injectCounter',counter.value)
    }
    console.log(context.attrs);
    context.expose({
      sendeParent,counter
    })
    return () => h('div', counter.value)
  },
  data() {
    return {
      a: 10,
    };
  },
  // mounted(){
  //   console.log(this.message);
  // }
}
</script>